<template>
  <div class="mine">
    <div class="el">饿了么</div>
    <div class="header">
      <img src="https://img0.baidu.com/it/u=236085137,1979895699&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666803600&t=805aaae82c30b15d27e72253483b4338" alt="">
      <div class="name">7a9aa5a077a</div>
      <div class="phone">136****9070</div>
      <div class="user">账户设置</div>
    </div>
    <div class="card">
      <img src="https://img2.baidu.com/it/u=2286769164,1007663136&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=255" alt="">
    </div>
    <div class="packet">
      <span class="balance">
        <div class="red">红包</div>
        <div class="yuan">7张今日到期</div>
      </span>
      <span class="balance">
        <div class="red">余额</div>
        <div class="yuan">0元</div>
      </span>
    </div>
    <div class="block">
      <div class="title">常用工具</div>
      <div class="list">
        <div class="btn" @click="toAddress">
          <van-icon name="location-o" size="24" />
          <span>我的地址</span>
        </div>
        <div class="btn">
          <van-icon name="phone-circle-o"  size="24"/>
          <span>我的客服</span>
        </div>
        <div class="btn" @click="toCollect"> 
          <van-icon name="like-o"  size="24"/>
          <span>店铺关注</span>
        </div>
        <div class="btn">
          <van-icon name="star-o"  size="24"/>
          <span>评价有礼</span>
        </div>
      </div>
    </div>
    <div class="dou">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252FgP1Xjn%253D5eiZGsJZaKpTbw0mODAvxyt0abXTLzbRfhdQDu1561099625684.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669293745&t=86d4004b0fa9f1781a82367adad24544" alt="">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252FgP1Xjn%253D5eiZGsJZaKpTbw0mODAvxyt0abXTLzbRfhdQDu1561099625684.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669293745&t=86d4004b0fa9f1781a82367adad24544" alt="">
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    toCollect(){
      this.$router.push('/collect');
    },
    toAddress(){
      this.$router.push('/address');
    }
  }
}
</script>

<style lang='scss' scoped>
.mine{
  background-color: #f5f5f5;
}
.el{
  font-size: 26px;
  font-weight: bold;
  padding: 20px 15px;
  background-color: #f5f5f5;
}
.header{
  height: 80px;
}
.header img{
  border-radius: 50%;
  width: 70px;
  margin-left: 20px;
  float: left;
}
.header .name{
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
  float: left;
  margin-top: 20px;
}
.header .phone {
  float: left;
  margin-top: 50px;
  margin-left: -120px;
}
.header .user {
  width: 70px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  margin-top: 30px;
  margin-right: 20px;
  float: right;
  border-radius: 30px;
  border: 2px solid #E3E4E5;
}
.card img {
  width: 95%;
  height: 80px;
  margin-left: 10px;
  border-radius: 10%;
 
}
.packet{
  width: 95%;
  height: 80px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 10%;
  background-color: white;
}
.balance{
  width: 100px;
  float: left;
  margin-left: 60px;
  margin-top: 20px;
}
.balance div{
  width: 100px;
  
}
.balance .red{
  font-size: 20px;
  font-weight: bold;
}
.balance .yuan{
  font-size: 15px;
  color:gray;
}
.block{
  margin: 10px;
  background-color: white;
  .title{
    font-weight: bold;
    padding-left: 10px;
  }
  .list{
    display: flex;
    justify-content: space-around;
    align-content: center;
    .btn{
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      i{
        margin-bottom: 10px;
      }
    }
  }
}
.dou img{
  width: 46%;
  height: 180px;
  margin-left: 10px;
}
</style>